/**
 * admui-basic v2.1.0 (http://www.admui.com/)
 * Copyright 2015-2019 Admui Team
 * Licensed under the Admui License 1.1 (http://www.admui.com/about/license)
 */
(function(document, window, $) {
  'use strict';

  /* global c3 */

  // 图表示例
  var charts = {
    example1: function() {
      // 简单曲线图示例
      c3.generate({
        bindto: '#exampleC3SimpleLine',
        data: {
          columns: [
            ['数据1', 100, 165, 140, 270, 200, 140, 220],
            ['数据2', 110, 80, 100, 85, 125, 90, 100]
          ]
        },
        color: {
          pattern: [$.getColor('purple', 600), $.getColor('green', 600)]
        },
        axis: {
          x: {
            tick: {
              outer: false
            }
          },
          y: {
            max: 300,
            min: 0,
            tick: {
              outer: false,
              count: 7,
              values: [0, 50, 100, 150, 200, 250, 300]
            }
          }
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });
    },
    example2: function() {
      // 曲线区域图示例
      c3.generate({
        bindto: '#exampleC3LineRegions',
        data: {
          columns: [
            ['数据1', 100, 165, 140, 270, 200, 140, 220],
            ['数据2', 110, 80, 100, 85, 125, 90, 100]
          ],
          regions: {
            data1: [
              {
                start: 1,
                end: 2,
                style: 'dashed'
              },
              {
                start: 3
              }
            ], // currently 'dashed' style only
            data2: [
              {
                end: 3
              }
            ]
          }
        },
        color: {
          pattern: [$.getColor('purple', 600), $.getColor('green', 600)]
        },
        axis: {
          x: {
            tick: {
              outer: false
            }
          },
          y: {
            max: 300,
            min: 0,
            tick: {
              outer: false,
              count: 7,
              values: [0, 50, 100, 150, 200, 250, 300]
            }
          }
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });
    },
    example3: function() {
      // 时间序列图示例
      var timeSerieschart = c3.generate({
        bindto: '#exampleC3TimeSeries',
        data: {
          x: 'x',
          columns: [
            [
              'x',
              '2013-01-01',
              '2013-01-02',
              '2013-01-03',
              '2013-01-04',
              '2013-01-05',
              '2013-01-06'
            ],
            ['数据1', 80, 125, 100, 220, 80, 160],
            ['数据2', 40, 85, 45, 155, 50, 65]
          ]
        },
        color: {
          pattern: [$.getColor('purple', 600), $.getColor('green', 600), $.getColor('red', 500)]
        },
        padding: {
          right: 40
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              outer: false,
              format: '%Y-%m-%d'
            }
          },
          y: {
            max: 300,
            min: 0,
            tick: {
              outer: false,
              count: 7,
              values: [0, 50, 100, 150, 200, 250, 300]
            }
          }
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });

      setTimeout(function() {
        timeSerieschart.load({
          columns: [['数据3', 210, 180, 260, 290, 250, 240]]
        });
      }, 1000);
    },
    example4: function() {
      // 曲线图示例
      c3.generate({
        bindto: '#exampleC3Spline',
        data: {
          columns: [
            ['数据1', 100, 165, 140, 270, 200, 140, 220],
            ['数据2', 110, 80, 100, 85, 125, 90, 100]
          ],
          type: 'spline'
        },
        color: {
          pattern: [$.getColor('purple', 600), $.getColor('green', 600)]
        },
        axis: {
          x: {
            tick: {
              outer: false
            }
          },
          y: {
            max: 300,
            min: 0,
            tick: {
              outer: false,
              count: 7,
              values: [0, 50, 100, 150, 200, 250, 300]
            }
          }
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });
    },
    example5: function() {
      // 散点图示例
      c3.generate({
        bindto: '#exampleC3Scatter',
        data: {
          xs: {
            setosa: 'setosa_x',
            versicolor: 'versicolor_x'
          },
          columns: [
            [
              'setosa_x',
              3.5,
              3.0,
              3.2,
              3.1,
              3.6,
              3.9,
              3.4,
              3.4,
              2.9,
              3.1,
              3.7,
              3.4,
              3.0,
              3.0,
              4.0,
              4.2,
              3.9,
              3.5,
              3.8,
              3.8,
              3.4,
              3.7,
              3.6,
              3.3,
              3.4,
              3.0,
              3.4,
              3.5,
              3.4,
              3.2,
              3.1,
              3.4,
              4.1,
              4.2,
              3.1,
              3.2,
              3.5,
              3.6,
              3.0,
              3.4,
              3.5,
              2.3,
              3.2,
              3.5,
              3.8,
              3.0,
              3.8,
              3.2,
              3.7,
              3.3
            ],
            [
              'versicolor_x',
              3.2,
              3.2,
              3.1,
              2.3,
              2.8,
              2.8,
              3.3,
              2.4,
              2.9,
              2.7,
              2.0,
              3.0,
              2.2,
              2.9,
              2.9,
              3.1,
              3.0,
              2.7,
              2.2,
              2.5,
              3.2,
              2.8,
              2.5,
              2.8,
              2.9,
              3.0,
              2.8,
              3.0,
              2.9,
              2.6,
              2.4,
              2.4,
              2.7,
              2.7,
              3.0,
              3.4,
              3.1,
              2.3,
              3.0,
              2.5,
              2.6,
              3.0,
              2.6,
              2.3,
              2.7,
              3.0,
              2.9,
              2.9,
              2.5,
              2.8
            ],
            [
              'setosa',
              0.2,
              0.2,
              0.2,
              0.2,
              0.2,
              0.4,
              0.3,
              0.2,
              0.2,
              0.1,
              0.2,
              0.2,
              0.1,
              0.1,
              0.2,
              0.4,
              0.4,
              0.3,
              0.3,
              0.3,
              0.2,
              0.4,
              0.2,
              0.5,
              0.2,
              0.2,
              0.4,
              0.2,
              0.2,
              0.2,
              0.2,
              0.4,
              0.1,
              0.2,
              0.2,
              0.2,
              0.2,
              0.1,
              0.2,
              0.2,
              0.3,
              0.3,
              0.2,
              0.6,
              0.4,
              0.3,
              0.2,
              0.2,
              0.2,
              0.2
            ],
            [
              'versicolor',
              1.4,
              1.5,
              1.5,
              1.3,
              1.5,
              1.3,
              1.6,
              1.0,
              1.3,
              1.4,
              1.0,
              1.5,
              1.0,
              1.4,
              1.3,
              1.4,
              1.5,
              1.0,
              1.5,
              1.1,
              1.6,
              1.3,
              1.5,
              1.2,
              1.3,
              1.4,
              1.4,
              1.2,
              1.5,
              1.0,
              1.1,
              1.0,
              1.2,
              1.6,
              1.5,
              1.6,
              1.5,
              1.3,
              1.3,
              1.3,
              1.2,
              1.4,
              1.2,
              1.0,
              1.3,
              1.2,
              1.3,
              1.3,
              1.1,
              1.3
            ]
          ],
          type: 'scatter'
        },
        color: {
          pattern: [$.getColor('green', 600), $.getColor('red', 500)]
        },
        axis: {
          x: {
            label: 'Sepal.Width',
            tick: {
              outer: false,
              fit: false
            }
          },
          size: {
            height: 400
          },
          padding: {
            right: 40
          },
          y: {
            label: 'Petal.Width',
            tick: {
              outer: false,
              count: 5,
              values: [0, 0.4, 0.8, 1.2, 1.6]
            }
          }
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });
    },
    example6: function() {
      // 柱状图示例
      var chart = c3.generate({
        bindto: '#exampleC3Bar',
        data: {
          columns: [['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 100, 140, 200, 150, 50]],
          type: 'bar'
        },
        bar: {
          width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
          }
          // or
          // width: 100 // this makes bar width 100px
        }
      });

      setTimeout(function() {
        chart.load({
          columns: [['data3', 130, -150, 200, 300, -200, 100]]
        });
      }, 1000);
    },
    example7: function() {
      // 堆叠柱状图示例
      var stackedBarChart = c3.generate({
        bindto: '#exampleC3StackedBar',
        data: {
          columns: [
            ['数据1', -30, 200, 300, 400, -150, 250],
            ['数据2', 130, 100, -400, 100, -150, 50],
            ['数据3', -230, 200, 200, -300, 250, 250]
          ],
          type: 'bar',
          groups: [['数据1', 'data2']]
        },
        color: {
          pattern: [
            $.getColor('purple', 500),
            $.getColor('blue-grey', 300),
            $.getColor('purple', 500),
            $.getColor('light-green', 500)
          ]
        },
        bar: {
          width: {
            max: 45
          }
        },
        grid: {
          y: {
            show: true,
            lines: [
              {
                value: 0
              }
            ]
          }
        }
      });

      setTimeout(function() {
        stackedBarChart.groups([['数据1', 'data2', 'data3']]);
      }, 1000);

      setTimeout(function() {
        stackedBarChart.load({
          columns: [['数据4', 100, -250, 150, 200, -300, -100]]
        });
      }, 1500);

      setTimeout(function() {
        stackedBarChart.groups([['数据1', 'data2', 'data3', 'data4']]);
      }, 2000);
    },
    example8: function() {
      // 组合图示例
      c3.generate({
        bindto: '#exampleC3Combination',
        data: {
          columns: [
            ['数据1', 30, 20, 50, 40, 60, 50],
            ['数据2', 200, 130, 90, 240, 130, 220],
            ['数据3', 300, 200, 160, 400, 250, 250],
            ['数据4', 200, 130, 90, 240, 130, 220],
            ['数据5', 130, 120, 150, 140, 160, 150],
            ['数据6', 90, 70, 20, 50, 60, 120]
          ],
          type: 'bar',
          types: {
            data3: 'spline',
            data4: 'line',
            data6: 'area'
          },
          groups: [['数据1', 'data2']]
        },
        color: {
          pattern: [
            $.getColor('blue-grey', 400),
            $.getColor('blue-grey', 200),
            $.getColor('yellow', 600),
            $.getColor('purple', 600),
            $.getColor('red', 400),
            $.getColor('green', 600)
          ]
        },
        grid: {
          x: {
            show: false
          },
          y: {
            show: true
          }
        }
      });
    },
    example9: function() {
      // 饼状图
      c3.generate({
        bindto: '#exampleC3Pie',
        data: {
          // iris data from R
          columns: [['数据1', 100], ['数据2', 40]],
          type: 'pie'
        },
        color: {
          pattern: [$.getColor('purple', 500), $.getColor('blue-grey', 200)]
        },
        legend: {
          position: 'right'
        },
        pie: {
          label: {
            show: false
          }
        }
      });
    },
    example10: function() {
      // 环形图
      c3.generate({
        bindto: '#exampleC3Donut',
        data: {
          columns: [['数据1', 120], ['数据2', 40], ['数据3', 80]],
          type: 'donut'
        },
        color: {
          pattern: [$.getColor('purple', 500), $.getColor('blue-grey', 200), $.getColor('red', 400)]
        },
        legend: {
          position: 'right'
        },
        donut: {
          label: {
            show: false
          },
          width: 10,
          title: 'C3 环形图'
        }
      });
    },
    example11: function() {
      // 区域缩放1示例
      c3.generate({
        bindto: '#exampleC3Subchart',
        data: {
          columns: [
            ['数据1', 100, 165, 140, 270, 200, 140, 220, 210, 190, 100, 170, 250],
            ['数据2', 110, 80, 100, 85, 125, 90, 100, 130, 120, 90, 100, 115]
          ],
          type: 'spline'
        },
        color: {
          pattern: [$.getColor('purple', 600), $.getColor('green', 600)]
        },
        subchart: {
          show: true
        }
      });
    },
    example12: function() {
      // 区域缩放2示例
      c3.generate({
        bindto: '#exampleC3Zoom',
        data: {
          columns: [
            [
              '数据',
              30,
              200,
              100,
              400,
              150,
              250,
              150,
              200,
              170,
              240,
              350,
              150,
              100,
              400,
              150,
              250,
              150,
              200,
              170,
              240,
              100,
              150,
              250,
              150,
              200,
              170,
              240,
              30,
              200,
              100,
              400,
              150,
              250,
              150,
              200,
              170,
              240,
              350,
              150,
              100,
              400,
              350,
              220,
              250,
              300,
              270,
              140,
              150,
              90,
              150,
              50,
              120,
              70,
              40
            ]
          ],
          colors: {
            sample: $.getColor('purple', 600)
          }
        },
        zoom: {
          enabled: true
        }
      });
    }
  };

  $(function() {
    // 初始化图表示例
    $.each(charts, function(i, n) {
      n();
    });
  });
})(document, window, jQuery);
